/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'
import { Input, Picker  } from '@tarojs/components'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CTouch, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http, Toast } from '../../../library/func';
import Icon from '../../../project/style/icon';
import DoHttp from '../../../project/func/http/http';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Submit extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			background: '#f60',
			status: 'success',
			// 用户添加地址
			province: ['美国1', '中国1', '巴西1', '日本1'],
			provinceval:'选择省',

			city: ['美国市2', '中国市2', '巴西市2', '日本市2'],
			cityval:'选择市',

			district: ['美国县3', '中国县3', '巴西县3', '日本县3'],
			districtval:'选择区/县',

			vip_name:'',

			show_bt:false,

			send:true,
			sendms:5,

			data:{

				pid:100000,

				set_name: '',
				set_mobile: '',
				code:'',


				set_take_name: '',
				set_take_mobile: '',
				set_take_address:'',
				set_take_province: '',
				set_take_city: '',
				set_take_district: '',

			}
		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {
		this.getDist();
	}	

	componentWillMount(){
		let pid = this.$router.params.pid;
		let data = this.state.data;
		data['pid'] = pid;
		this.setState({
			data:data,
		})
	}

	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/

	//获取推荐人信息
	getDist(){
		DoHttp.get({
			url:'vip/getDist.php',
			success:(res)=>{
				console.log('推荐人', res)
				this.setState({
					vip_name:res.vip_name
				});
			}
		})

	}

	// onClick
	onClick = (id, e)=> {
		DoHttp.post({
			url:'vip/logic/buy.php',
			data:{},
			success:(res)=>{
				//提交成功后，需要跳转>>>>>>>>>>
				Toast.text('提交成功');
			}
		})
    }
    
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {

	}
	
	// 用户添加地址
	addAddress = ()=>{

	}

	// 设为默认地址开关change事件
	default = (e) => {
		console.log(e.detail.value)
	}

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	config = {
        navigationBarTitleText: '礼包提交订单',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
	}
	
	//修改输入值
	inputChange(field, e){
		console.log(e)
		let data = this.state.data;
		//显示提交按钮和隐藏遮挡
		data[field] = e.detail.value;

		this.setState({
			data:data,
		},()=>{
			if(this.state.data['set_name']!="" && this.state.data['set_mobile']!="" && this.state.data['code']!=""){
				this.setState({
					show_bt:true,
				})
			}else{
				this.setState({
					show_bt:false,
				})
			}
		})
	}

	//发送验证码
	sendMsg(){	

		let time = 120;

		if(this.state.data.set_mobile != ""){
			if(this.state.send){

				this.setState({
					sendms:time,
				},()=>{
	
					//处理发送业务
					if(this.state.set_mobile == ""){
						Toast.text("请输入您的手机号码");
						return;
					}else{
						DoHttp.post({
							url:'vip/logic/sendMsg.php',
							data:{
								set_mobile:this.state.data.set_mobile,
							},
							success:(res)=>{
								Toast.text("成功发送短信至您的手机，请注意查收");
							}
						})
					}
	
					setInterval(()=>{
						if(this.state.sendms == 0){
							this.setState({
								send:true,
							},()=>{
								return false;
							})
						}else{
							this.setState({
								send:false,
								sendms:this.state.sendms - 1,
							})	
						}
					},1000)	
				})
	
			}
	
		}else{
			Toast.text("请输入您的手机号码");
		}

		
	}


	// 修改省市县选择
	onChangeArea = (type, e) => {
		let data = this.state.data;
		data['set_take_'+type] = this.state[type][e.detail.value];

		this.setState({
			[type+"val"] : this.state[type][e.detail.value],
			data:data,
		})
	}


	//提交订单数据
	submitData =()=>{
		
		let data = this.state.data;

		console.log('提交数据',data);

		for(var key in data){
			if(data[key] == ""){
				Toast.text("请完整填写所有信息");
				return;
			}
		}


		DoHttp.post({
			url:'vip/logic/buy.php',
			data:data,
			success:(res)=>{
				Toast.text('提交成功');
				//需要条页面去>>>>>>>>>>>>>
			}
		})

	}


	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<CContent bg='#f5f5f5'>

					{/* 基本信息 */}
					<CRow h="80" bg="#F3F3F3"  px='30'>
						<CText color="#7C7C7C">基本信息</CText>
					</CRow>

					<CColumn bg='#fff'  px='30' pb='30'>

						{/* 姓名 */}
						<CLine style='border-bottom:2rpx solid #f5f5f5' h='100'>
							<CHand w="180">
								<CText size="28">姓名 ：</CText>
							</CHand>
							<Input onInput={ this.inputChange.bind(this, 'set_name') } type='text' placeholder='请输入真实姓名' style="font-size:28rpx" placeholderStyle='color:#979797' />
						</CLine>

						{/* 手机号 */}
						<CLine style='border-bottom:2rpx solid #f5f5f5' h='100'>
							<CHand w="180">
								<CText size="28">手机号：</CText>
							</CHand>

							<Input onInput={ this.inputChange.bind(this, 'set_mobile') } type='number' placeholder='请输入您的电话' maxLength='11' style="font-size:28rpx" placeholderStyle='color:#979797' />
						</CLine>

						{/* 验证码 */}
						<CLine style='border-bottom:2rpx solid #f5f5f5' h='100'>
							<CBetween>
								<CHand class="f08" y="center">

									<CHand w="180">
										<CText size="28">验证码：</CText>
									</CHand>

									<Input onInput={ this.inputChange.bind(this, 'code') }  type='number' placeholder='请输入您的验证码' maxLength='11'  style="font-size:28rpx" placeholderStyle='color:#979797' />
								</CHand>
								<CHand onClick={ this.sendMsg.bind(this) } class="f02" mr="0" style="font-size:28rpx" x="center" y="center" bg="#de001c" h="64"  ra="10" color="#fff">
									{ this.state.send ? <text>发送</text> : <text>{ this.state.sendms + "秒" }</text> }
									

								</CHand>
							</CBetween>
						</CLine>


						{/* 推荐人 */}
						<CLine style='border-bottom:2rpx solid #f5f5f5' h='100'>
							<CHand w="180">
								<CText size="28">推荐人：</CText>
							</CHand>
							<text style=" color:#666">{ this.state.vip_name }</text>
						</CLine>

					</CColumn>


					{/* 收货信息 */}
					<view style="width:100%; height:420rpx; z-index:100">
					<CRow h="40" bg="#F3F3F3"  px='15'>
						<CText color="#7C7C7C">收货信息</CText>
					</CRow>

					<CColumn bg='#fff'  px='15' pb='15'>

						{/* 收货人姓名 */}
						<CLine style='border-bottom:2rpx solid #f5f5f5' h='100'>
							<CHand w="180">
								<CText size="28">收货人姓名：</CText>
							</CHand>
							<Input onInput={ this.inputChange.bind(this, 'set_take_name') }  type='text' disabled={ this.state.show_bt ? false:true } placeholder='收货人姓名'  style="font-size:28rpx" placeholderStyle='color:#979797' />
						</CLine>

						{/* 手机号 */}
						<CLine style='border-bottom:2rpx solid #f5f5f5' h='100'>							
							<CHand w="180">
								<CText size="28">手机号：</CText>
							</CHand>
							<Input onInput={ this.inputChange.bind(this, 'set_take_mobile') }  type='number' disabled={ this.state.show_bt ? false:true } placeholder='联系人电话' maxLength='11'  style="font-size:28rpx" placeholderStyle='color:#979797' />
						</CLine>

						{/* 收货地址 */}
						<CLine style='border-bottom:2rpx solid #f5f5f5' h='100'>
							<CBetween>
								<CText size="28">收货地址：</CText>

								<Picker mode='selector' range={this.state.province} onChange={ this.onChangeArea.bind(this, 'province') }>
									<text style="color:#535353; font-size:28rpx">{this.state.provinceval}</text>
								</Picker>

								<Picker mode='selector' range={this.state.city} onChange={ this.onChangeArea.bind(this, 'city') }>
									<text style="color:#535353; font-size:28rpx">{this.state.cityval}</text>
								</Picker>

								<Picker mode='selector' range={this.state.district} onChange={ this.onChangeArea.bind(this, 'district') }>
									<text style="color:#535353; font-size:28rpx">{this.state.districtval}</text>
								</Picker>
								
								<CSvg icon={Icon.address} w='30' h='30'></CSvg>

							</CBetween>
						</CLine>

						{/* 详细地址 */}
						<CLine style='border-bottom:2rpx solid #f5f5f5' h='100'>
							<Input onInput={ this.inputChange.bind(this, 'set_take_address') } type='text' disabled={ this.state.show_bt ? false:true } placeholder='详细地址'  style="font-size:28rpx" placeholderStyle='color:#979797' />
						</CLine>

					</CColumn>

					</view>

					{ this.state.show_bt ?
					<CButton bg='#de001c' size='28' ma='30' ra='16' h='80' y='center' color="white" onClick={this.submitData.bind(this)}>马上支付</CButton>
					:
					<view style="width:100%; height:420rpx; background:#000; opacity: 0.6; margin-top:-420rpx; z-index:101"></view>
					}

				</CContent>
			</CPage>
		)
	}
}


